<!--
* description: 保养项目-工时选择
* author:wzm
* createdDate:2020-1-25
-->

<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisibleTime"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEditTime"
      @open="open"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="fixHeight">
        <div class="app-container app-container-table">
          <one-table-template
            ref="multipleTable"
            :dynamic-buttons="tableButtons"
            :dynamic-components="tableComponents"
            :dynamic-api-config="apiConfig"
            :dynamic-table-cols="tableCols"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="true"
            :dynamic-is-init-table="true"
            :dynamic-is-fix-choose="false"
            :dynamic-is-fix-index="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-api-style="'restful'"
            :dynamic-table-defult-height="300"
            :is-show-pagination="true"
            :callback-obj="callbackObj"
          />
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { vehiclePdiPriceInquirys } from '@/api/se/vehiclePdiPriceInquiry'
export default {
  components: {
    OneTableTemplate,
    // inEdit,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    dataForForm: {
      type: Object,
      default: () => {}
    },
    isDialogVisible: {
      type: Boolean,
      default: false
    },
    customObj: { type: Object, default: () => { return {} } },
    popupsVisibleTime: { type: Boolean, default: false },
    // 已经选择过的数据
    chosenList: { type: Array, default: () => ([]) }
  },

  data() {
    const viewPageCode = 'areaAudit-edit'
    return {
      titleName: '工时选择',
      apiConfig: vehiclePdiPriceInquirys.workHoursSelectionT,

      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectData = selection
          this.handleSelectionChange(selection)
        }
      },

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: this.$t('sys.button.query'), // 查询
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        },
        {
          compKey: 'btnKey3',
          size: 'small',
          clickEvent: () => this.select(),
          text: '选择',
          disabled: true,
          position: 'right' // 选择
        }
      ],

      // 动态组件-查询条件
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'wiCode',
              label: '工时编码',
              align: 'center'
            },
            {
              prop: 'repairContent',
              label: '维修内容',
              align: 'center'
            },
            {
              prop: 'carTypeCn',
              label: '车型',
              align: 'center'
            },
            {
              prop: 'saleWiQty',
              label: '标准工时',
              align: 'center'
            },
            {
              prop: 'repariType',
              label: '工时大类',
              align: 'center'
            },
            {
              prop: 'rrpairSmallKindCode',
              label: '工时小类',
              align: 'center'
            }
          ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '工时编码：',
              codeField: 'wiCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '车型：',
              codeField: 'carTypeCode',
              oFields: 'carTypeCode,carTypeCn',
              component: () => import('@/components/org/commonSelect'),
              customObj: {
                api: {
                  APIUrl: '/mp/e3sh/aftersale/maintenanceItemService/workRelaCarType.do'
                },
                selectType: '1'
              },
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '维修内容：',
              codeField: 'repairContent',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '工时大类：',
              codeField: 'operatePartCode',
              textField: 'opratePartName',
              oFields: 'operatePartCode,opratePartName',
              component: () => import('@/components/org/commonSelect'),
              customObj: {
                api: vehiclePdiPriceInquirys.findOpratePlace,
                selectType: '1'
              },
              type: 'dropdownList',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey5',
              labelName: '工时小类：',
              codeField: 'rrpairSmallKindCode',
              textField: 'rrpairSmallKindName',
              oFields: 'rrpairSmallKindCode,rrpairSmallKindName',
              component: () => import('@/components/org/commonSelect'),
              options: [],
              parentFileds: 'value:operatePartCode-operatePartCode',
              type: 'dropdownList',
              isMust: true,
              disabled: true,
              span: 8
            }
          ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          // operatePartCode: '',
          opratePlaceName: '',
          wiCode: '',
          carTypeCode: '',
          repairContent: '',
          operatePartCode: '', // 工时大类
          rrpairSmallKindCode: '', // 工时小类
          // wiSmallKindId: '',
          rrpairSmallKindName: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },
  watch: {
    'formField.operatePartCode'(val) {
      const comp = this.tableComponents.find(o => o.codeField === 'rrpairSmallKindCode')
      comp.disabled = !val
      if (val) {
        this.$requestAPI({
          apiUrl: vehiclePdiPriceInquirys.findSmallOpratePlace.APIUrl,
          variables: {
            operatePartCode: val
          }
        }).then(res => {
          if (res.result === '1') {
            comp.options = res.rows
          } else {
            this.$message(res.msg ? res.msg : '')
          }
        }).catch(err => {
          if (err.response.data.msg) {
            this.$message(err.response.data.msg)
          } else {
            this.$message(err.message)
          }
        })
      }
      this.formField.wiSmallKindId = ''
      this.formField.rrpairSmallKindName = ''
    }
  },
  methods: {
    open() {
      this.queryTable(1)
    },
    // 禁用上个弹窗已选择 数据
    getSelectable(row, index, ref) {
      return !this.chosenList.includes(row['wiCode'])
    },
    // 关闭弹窗
    closeEditTime() {
      this.popupsVisibleTime = false
      this.$emit('update:popupsVisibleTime', false)
      this.$emit('close', false)
      this.clearData()
    },
    select() {
      this.$emit('returnTimeData', this.selectData)
      this.closeEditTime()
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.tableButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
>>> div.fixHeight {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
h3 {
  padding-left: 1%;
  text-align: left;
  font-weight: 600;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.66, 0.3, 0.08, 1.41);
  opacity: 1;
  text-shadow: #c0c4cc 3px 3px 2px;
  /*transform-style: preserve-3d;*/
  /*transform: perspective(900px) translateZ(0) translateX(0);*/
}

h3 button.el-button {
  float: right;
  margin-right: 10px;
}

>>> .el-table .warm-row {
  background: #eedbae;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.fixHeight::v-deep .el-checkbox {
  width: 100%;
}
.styleButon {
  height: 24px;
}
.fixHeight::v-deep #searchFormGroup .el-row .el-col .el-col label {
  max-width: 120px !important;
}
</style>
